<script setup lang="ts">
import { interpreter } from "@/api/request";
import { getCaseTypeList } from "@/api/zixun";
import { reactive, onMounted } from "vue";
import ACard from "./ACard.vue";
import { shopApiBanner, shopApiTypeList } from "@/api/shopApi/index";
import Head from "@/components/Head/head.vue";
import FullPage from "@/components/Layout/FullPage.vue";

interface IList {
  avatar_image: string;
  created_at: string;
  id: number;
  message_total: number;
  nickname: string;
  opening_remarks: string;
  updated_at: string;
}

interface IState {
  list: IList[];
  loading: boolean;
  page: number;
  per_page: number;
  total: number;
  tabslist: any;
  currentIndexId: number;
  bannerList: any;
}

const state = reactive<IState>({
  list: [],
  loading: false,
  page: 1,
  per_page: 20,
  total: 0,
  tabslist: [
    {
      name: "全部",
      id: 0,
    },
  ],
  currentIndexId: 0,
  bannerList: [],
});
// 初始化智脑体tab列表
const initTab = async () => {
  const { data } = await shopApiTypeList();
  if (data.error_code === 0) {
    state.tabslist = state.tabslist.concat(data.data);
  }
};
// 初始化轮播
const initBanner = async () => {
  const param = {
    type: 2,
  };
  const { data } = await shopApiBanner(param);
  if (data.error_code === 0) {
    data.data.forEach((item: any) => {
      if (item.pos === 1) {
        state.bannerList.push(item);
      }
    });
  }
};
// 初始化列表
const initList = async () => {
  const param = {
    robot_type_id: state.currentIndexId,
    page: state.page,
  };
  const [err, res] = await interpreter(getCaseTypeList(param));
  if (!err) {
    console.log(res.data);
    // state.list = state.list.concat(res.data);
    state.list = res.data;
    state.total = res.total;
  }
  state.loading = false;
};
const onReachBottom = () => {
  if (state.total === state.list.length) {
    //总条数等于当前返回条数
    // uni.showToast({
    //   title: "没有更多内容了~",
    //   icon: "none"
    // });
  } else {
    // uni.showToast({
    //   title: "加载中...",
    //   icon: "none",
    //   mask: true
    // });
    state.page = state.page + 1;
    initList();
  }
};

const tabsClick = (p: any) => {
  state.currentIndexId = p.index;
  initList();
};

const toChat = (id: number) => {
  if (state.bannerList[id].id) {
    uni.navigateTo({
      url: `/pages/index/index?id=${state.bannerList[id].id}`,
    });
  }
};
onMounted(() => {
  state.loading = true;
  initBanner();
  initTab();
  initList();
});
</script>

<template>
  <FullPage
    header-style="padding: 0;"
    body-style="padding: 0;"
    :show-footer="false"
  >
    <template #header>
      <Head  isBg :fixed="false" type="level_2" name="陪聊" />
    </template>
    <scroll-view
      class="scroll-view"
      :scroll-with-animation="true"
      @scrolltolower="onReachBottom"
      scroll-x="false"
      scroll-y="true"
      :show-scrollbar="false"
    >
      <view class="pb50">
        <uv-swiper
          v-if="state.bannerList.length"
          indicatorActiveColor="#FF4949"
          indicator
          circular
          indicatorMode="dot"
          radius="15px"
          keyName="banner_url"
          :list="state.bannerList"
          @click="toChat"
        ></uv-swiper>
        <uv-tabs
          :activeStyle="{
            color: '#333333',
          }"
          :inactiveStyle="{
            color: '#999',
          }"
          lineColor="#FF4949"
          :list="state.tabslist"
          @click="tabsClick"
        ></uv-tabs>
      </view>

      <ACard :list="state.list" />
      <!-- <view class="no-more" v-if="state.total === state.list.length"
        >-没有更多内容了-</view
      > -->
      <uv-load-more
        v-if="!!state.list.length"
        customStyle="padding-bottom: 20px;"
        :status="state.loading ? 'loading' : 'nomore'"
        loadingIcon="semicircle"
        line
      />
    </scroll-view>
  </FullPage>
</template>

<style lang="scss" scoped>
.no-more {
  font-size: 12px;
  color: #ccc;
  text-align: center;
  padding-bottom: 5rpx;
}
page {
  background: #f9f9f9;
}

:deep(.uv-tabs__wrapper__nav__item__text) {
  font-size: 24rpx;
  color: #999999;
}

.scroll-view {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
}

.pb50 {
  padding-bottom: 50px;
  padding: 15px 20px 0 20px;
}
</style>
